<!--
 * @Description: 账单首页
 * @Author: duan_shuangjun 丶
 * @Date: 2025-08-21 15:35:52
 * @LastEditTime: 2025-08-21 23:08:12
-->
<template>
  <div>
    <div class="bill-wrapper">
      <div class="bill-type-box">
        <div
          class="bill-type-item"
          v-for="(item, index) in billList"
          :key="index"
          :style="{ background: item.background }"
          @click="handleToPage(item)"
        >
          <div class="bill-name">{{ item.name }}</div>
          <div class="bill-img-box">
            <img :src="item.img" class="bill-img" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

function resolveBillImg(file: string): string {
  // 相对本文件(src/views/Bill)，回到 src/assets/images/bill
  return new URL(`../../assets/images/bill/${file}`, import.meta.url).href
}

const billList = computed(() => [
  { name: '营业账单', img: resolveBillImg('businessBill.png'), background: '#a85b62' },
  { name: '交班账单', img: resolveBillImg('handoverBill.png'), background: '#6c5356' },
  { name: '反结账记录', img: resolveBillImg('cancelClosing.png'), background: '#6c5356' },
  { name: '挂账回款', img: resolveBillImg('onAccount.png'), background: '#aaa5ab' },
  { name: '回款明细', img: resolveBillImg('onAccountDetail.png'), background: '#dbb9ba' },
  { name: '菜品分类报表', img: resolveBillImg('foodCategorySummary.png'), background: '#c3bacc' },
  { name: '销售报表', img: resolveBillImg('saleSummary.png'), background: '#959090' },
  { name: '交班汇总表', img: resolveBillImg('handoverSummary.png'), background: '#c3bec4' },
  { name: '分时销售报表', img: resolveBillImg('time_division.png'), background: '#d2cbcc' }
])

function handleToPage(item: { name: string }) {
  switch (item.name) {
    case '交班账单':
      router.push({ path: '/bill/handover' })
      break
    case '营业账单':
      router.push({ path: '/bill/businessBill' })
      break
    case '挂账回款':
      router.push({ path: '/bill/onAccount' })
      break
    case '销售报表':
      router.push({ path: '/bill/dailySaleSummary' })
      break
    case '反结账记录':
      router.push({ path: '/bill/cancelClosing' })
      break
    case '交班汇总表':
      router.push({ path: '/bill/handoverSummary' })
      break
    case '回款明细':
      router.push({ path: '/bill/onAccountDetail' })
      break
    case '菜品分类报表':
      router.push({ path: '/bill/foodCategorySummary' })
      break
    case '分时销售报表':
      router.push({ path: '/bill/timeDivisionSale' })
      break
  }
}
</script>

<style scoped lang="scss">
.bill-wrapper {
  width: 100%;
  max-width: 1600px;
  min-height: calc(100vh - 140px);
  background: #ffffff;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 30px;
  //   margin: 0 auto;
  .bill-type-box {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    .bill-type-item {
      flex: 1 1 calc(25% - 24px);
      //   min-width: 260px;
      //   max-width: 360px;
      /* 高度改为等比，随宽度自适应 */
      aspect-ratio: 16 / 9;
      background: #a85b62;
      border-radius: 12px;
      display: flex;
      padding: 0 16px 16px 16px;
      cursor: pointer;
      .bill-name {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: flex-end;
        width: 45%;
      }
      .bill-img-box {
        width: 55%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        padding-top: 12px;
        padding-right: 12px;
        .bill-img {
          height: 70%;
          width: auto;
          max-height: 120px;
        }
      }
    }
  }
}

@media (max-width: 1400px) {
  .bill-wrapper .bill-type-item {
    flex-basis: calc(33.333% - 24px);
  }
}

@media (max-width: 1100px) {
  .bill-wrapper .bill-type-item {
    flex-basis: calc(50% - 24px);
  }
}

@media (max-width: 768px) {
  .bill-wrapper {
    padding: 16px;
  }
  .bill-wrapper .bill-type-item {
    flex-basis: 100%;
    min-width: 0;
  }
}
</style>
